<template>
  <div class="approve-box">
    <div class="logic-flow-view">
      <!-- 画布 -->
      <div id="LF-view" ref="container"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, computed, ref, getCurrentInstance, onMounted, watch, onUnmounted, createVNode, toRaw, nextTick } from 'vue';
import LogicFlow from '@logicflow/core';
import Dagre from './LFComponents/dagre';

import { Menu, Snapshot, MiniMap, lfJson2Xml, BpmnAdapter, lfXml2Json, BpmnElement, BpmnXmlAdapter, toNormalJson } from '@logicflow/extension';
import '@logicflow/core/dist/style/index.css';
import '@logicflow/extension/lib/style/index.css';

import { registerPolyline, registerStart, registerEnd, registerApprover, registerCcTo, registerCondition, registerPerformTasks } from './registerNode';
import { DrawerProps, message, Modal } from 'ant-design-vue';

const { proxy }: any = getCurrentInstance();
//import {useRoute, useRouter } from "vue-router";
//const demoData = require('./data.json')

const container: any = ref();
const lf = ref<any>({});
const showAddPanel = ref<boolean>(false);
const addPanelStyle: any = reactive({
  top: 0,
  left: 0
});
const nodeData = ref<any>(null);
const addClickNode = ref<any>(null);
const clickNode = ref<any>(null);
const placement = ref<DrawerProps['placement']>('right');
const dialogVisible = ref<boolean>(false);
const formPermissionsData = ref<any>(null);
const isEdit = ref<boolean>(false);

const props = defineProps<{
  formData: any;
}>();

let config: any = reactive({
  snapline: {
    stroke: '#1E90FF', // 对齐线颜色
    strokeWidth: 1 // 对齐线宽度
  },
  background: {
    backgroundColor: '#ffffff'
  },
  // grid: {
  // 	size: 20,
  // 	visible: true,
  // 	type: "dot",
  // 	config: {
  // 		color: "#ababab",
  // 		thickness: 1,
  // 	},
  // },
  //grid:true,
  keyboard: {
    enabled: true
  },
  edgeTextDraggable: true,
  hoverOutline: false,
  nodeSelectedOutline: false,
  plugins: [Menu, MiniMap, Snapshot, Dagre, BpmnAdapter, BpmnElement, BpmnXmlAdapter],
  container: container,
  stopScrollGraph: true,
  stopZoomGraph: true,
  isSilentMode: true,
  // stopMoveGraph: true,
  autoExpand: true
});
const moveData = ref({});
const lfRenderData = ref('');

const initLf = () => {
  // 画布配置

  lf.value = new LogicFlow(config);
  // 设置主题
  lf.value.setTheme({
    polygon: {
      strokeWidth: 1
    },
    polyline: {
      stroke: '#dddddd',
      hoverStroke: '#000000',
      selectedStroke: '#000000',
      outlineColor: '#88f',
      strokeWidth: 1
    },
    nodeText: {
      color: '#000000'
    },
    edgeText: {
      color: '#000000',
      background: {
        fill: '#f7f9ff'
      }
    }
  });
  $_registerNode();
};

// 自定义
const $_registerNode = () => {
  registerStart(lf.value);
  registerApprover(lf.value);
  registerEnd(lf.value);
  registerCcTo(lf.value);
  registerPerformTasks(lf.value);
  registerCondition(lf.value);
  registerPolyline(lf.value);

  $_render();
};
const $_render = () => {
  //lf.value.render(lf.value.adapterOut(demoData))
  let xml = props.formData;
  if (xml) {
    let data = toNormalJson(lfXml2Json(xml));
    // lfRenderData.value = data;
    let res = lfXml2Json(xml);
    let sequenceFlowList = res['bpmn:definitions']['bpmn:process']['bpmn:sequenceFlow'];
    sequenceFlowList?.map((item) => {
      if (item['bpmn:conditionExpression']) {
        item['bpmn:conditionExpression'] = '';
      }
      if (item['-name']) {
        item['-names'] = item['-name'];
        delete item['-name'];
      }
    });
    lf.value.render(lfJson2Xml(res));
    sequenceFlowList?.map((item) => {
      if (item['-names']) {
        lf.value.updateText(item['-id'], item['-names']);
      }
    });
    let startId = data['bpmn:definitions']['bpmn:process']['bpmn:startEvent']['id'];
    let startName = data['bpmn:definitions']['bpmn:process']['bpmn:startEvent']['name'];
    lf.value.setProperties(startId, {
      name: startName
    });
    // 审批人
    let userTaskInfo = data['bpmn:definitions']['bpmn:process']['bpmn:userTask'];
    console.log(userTaskInfo, 'userTaskInfo');

    if (Array.isArray(userTaskInfo)) {
      userTaskInfo.map((item: any) => {
        console.log(item, '看下item');

        lf.value.setProperties(item.id, {
          name: item.name
        });
      });
    } else {
      lf.value.setProperties(userTaskInfo['id'], {
        name: userTaskInfo['name']
      });
    }
  } else {
    lf.value.render();
  }
  $_LfEvent();
};

const $_getData = () => {
  const data = lf.value.getGraphData();
  console.log(JSON.stringify(data), '$_getData ');
};
const onClose = () => {
  dialogVisible.value = false;
};
const $_LfEvent = () => {
  lf.value.on('node:click', ({ data }) => {
    console.log('node:click', data);

    if (data.type === 'bpmn:endEvent') {
    } else {
      clickNode.value = data;
      dialogVisible.value = false;
      setTimeout(() => {
        dialogVisible.value = true;
      }, 0);
    }
  });
  lf.value.on('edge:click', ({ data }) => {
    console.log('edge:click', data);
    clickNode.value = data;
    dialogVisible.value = true;
  });
  lf.value.on('element:click', () => {
    hideAddPanel();
  });
  lf.value.on('edge:add', ({ data }) => {
    console.log('edge:add', data);
  });
  lf.value.on('node:mousemove', ({ data }) => {
    console.log('node:mousemove');
    moveData.value = data;
  });
  lf.value.on('blank:click', () => {
    hideAddPanel();
  });
  lf.value.on('connection:not-allowed', (data) => {
    // $message({
    // 	type: 'error',
    // 	message: data.msg
    // })
  });
  lf.value.on('node:mousemove', () => {
    console.log('on mousemove');
  });
};

const clickPlus = (e, attributes) => {
  e.stopPropagation();
  console.log('clickPlus', e, attributes);
  const { clientX, clientY } = e;
  console.log(clientX, clientY);
  addPanelStyle.top = clientY - 40 + 'px';
  addPanelStyle.left = clientX + 'px';
  showAddPanel.value = true;
  addClickNode.value = attributes;
};

const mouseDownPlus = (e, attributes) => {
  e.stopPropagation();
  console.log('mouseDownPlus', e, attributes);
};

const hideAddPanel = () => {
  showAddPanel.value = false;
  addPanelStyle.top = 0;
  addPanelStyle.left = 0;
  addClickNode.value = null;
};

const closeDialog = () => {
  dialogVisible.value = false;
};

const $_catData = () => {
  console.log(lf.value.getGraphData());
};

onMounted(() => {
  nextTick(() => {
    initLf();
  });
});
</script>

<style lang="less" scoped>
.approve-box {
  position: relative;
  height: 96%;
  .operate {
    position: absolute;
    top: -50px;
    right: 0;
  }
  .logic-flow-view {
    display: flex;
    height: 100%;
    position: relative;
    min-height: 1200px;
  }

  .control-box {
    position: absolute;
    top: 10px;
    left: 50px;
    z-index: 2;
  }

  #LF-view {
    flex: 1;
    // height: 100%;
    outline: none;
  }
  .property-box {
    width: 350px;
    height: 100%;
    background: #f7f9fc;
    overflow-y: auto;
  }

  .time-plus {
    cursor: pointer;
  }

  .add-panel {
    position: absolute;
    z-index: 11;
    background-color: white;
    padding: 10px 5px;
  }

  .custom-anchor {
    fill: #ff7f0e;
    stroke: #ff7f0e;
  }

  .custom-anchor:hover {
    fill: #ff7f0e;
    stroke: #ff7f0e;
  }

  .lf-red-node:hover {
    stroke: #ff7f0e;
    transform: scale(1.4, 1.4) translate(-0.5%, -1%);
  }

  @keyframes lf_animate_dash {
    to {
      stroke-dashoffset: 0;
    }
  }
}
</style>
